<template>
  <div id="app">
   
    <el-container class="gn_main" >
      <el-aside width="180px"></el-aside>
      <div class="gn_leftAll">
      <el-container class="gn_leftAllMain">
        <el-header v-show="$route.name !== '维修人员'"></el-header>
        <el-main>
          <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb>
          <el-breadcrumb> -->
         <!--  <el-breadcrumb>
            <el-breadcrumb-item 
              separator = '/' 
              v-for = "(item,index) in breadlist" 
              :key = 'index' 
              :to="{path: item.path}">
              {{item.meta.CName}}
            </el-breadcrumb-item>
          </el-breadcrumb> -->

          <el-breadcrumb separator="/" v-show="$route.name !== '维修人员'" >
            <el-breadcrumb-item v-for="(item, index) in realList" key="index" :to="item.path">{{item.name}}</el-breadcrumb-item>
           </el-breadcrumb>
          <div class="positionrel clearfix" style="width:100%;height:100%" :class="roleNoShow ? '' :'posetionrole' ">
            <div class="gn_leftbox" :class="isabsolt ? '' :'posetionab' " :style="{width:($route.name === '维修人员'?'100% ': null)}">
              <router-view/>
            </div>
            <v-right v-show='!isabsolt' v-if ='roleNoShow'></v-right>
          </div>
        </el-main>
      </el-container>
    </div>
    </el-container>
  </div>
</template>

<script>
    import header from './header'
    import aside from './aside'
    import right from './right'
    import bus from '@/api/bus'
    var echarts = require('echarts');
    export default {//isabsolt切换false右侧区域消失
      data(){
        return{
          roleId:'',
          isabsolt:'',
          roleNoShow:'',//角色判定超管显示内容
          //breadlist: []//面包屑导航
          realList: [],
          leftA:{width:(this.$route.name === '维修人员'?'100% ': null)},
          leftB:{height:(this.$route.name === '维修人员'?'100% ': null)}
        }
      },
      name: 'App',
      components:{
        'el-header':header,
        'el-aside':aside,
        'v-right':right
      },
      created () {
        this.getRoutePath();
        //this.getBread();
        let roleIdNumber = JSON.parse(sessionStorage.getItem('userInfo')).roleId;
        this.roleId = roleIdNumber
        if(this.roleId == 3){ //修正超管没有右侧排队内容的判断
          this.isabsolt = true
          this.roleNoShow = false
        }else if(this.roleId == 1 || this.roleId == 2|| this.roleId == 4){
          this.isabsolt = false
          this.roleNoShow = true
        }
        bus.$on('hideEvent', (e) => {
          this.isabsolt = e;
        })
      },
      methods:{
        getRoutePath() {
          this.realList = this.$route.meta.routeList;
          //console.log(this.realList)
        }
      },
      beforeRouteEnter(to,from, next) {
        next((vm) => {
          vm.realList = to.meta.routeList;
        });
      },
      watch:{
        $route(){
          this.getRoutePath()
        }
      }
    };
</script>

<style scoped>
  .gn_main{display:box;display:-webkit-box;}
  .el-menu{border-right:none;}
  .el-main{position:relative;height:100%;width:100%;overflow-y:auto;padding:10px;}
  .el-breadcrumb{height:20px;}
  .posetionab{position:absolute;}
  .posetionrole{
    height: 100%;
    width: 100%;
  }
  .posetionrole .gn_leftbox{position:static;}
  .gn_leftbox{
    /*width: 100%;*/
   
    min-height: 100%;
  }
  .gn_leftAll{display:box;display:-webkit-box;box-flex:1;-webkit-box-flex: 1;}
  .gn_leftAllMain{width:100%;-webkit-box-orient:vertical;flex:1;}

</style>
